// 文件名：Login.tsx
import React, { useContext, useEffect, useState } from "react";
import { Navigate, useNavigate } from "react-router-dom";
import { Auth,Login as doLogin, tryMsg } from "../../service";
import { AuthSessionData } from "../../types";
import { useRoleContext } from "../../provider/tsx";

const Login: React.FC = () => {
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [token, setToken] = useState<string>("");
  const [error, setError] = useState<string | null>(null);
  const navigate = useNavigate();
  const roleContext  = useRoleContext();

  const auth = roleContext.getSessionData();
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // 简单的表单校验
    if (!username || !password) {
      setError("用户名和密码不能为空");
      return;
    }
    tryMsg(async()=>{
      let rspAuth = await doLogin({username:username,password:password})
      let token = rspAuth.data.token;
      let user = rspAuth.data.user;
      let authData:AuthSessionData = {token: token,role:user?.super?"admin":"common",username:user.username}
      roleContext.setSessionData(authData)
      navigate('/')
    },(e)=>{
      setError(e.message);
    })
   
    return 1;
    
  };
  
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-lg w-96">
        <h2 className="text-2xl font-bold mb-6 text-center">登录</h2>
        <form onSubmit={(e)=>{
          handleSubmit(e)
        }}>
        {/* <div className="mb-4">
            <label
              htmlFor="token"
              className="block text-sm font-medium text-gray-700"
            >
              token
            </label>
            <input
              type="text"
              id="token"
              value={token}
              onChange={(e) => setToken(e.target.value)}
              className="mt-1 p-2 w-full border border-gray-300 rounded-md focus:ring focus:ring-blue-200"
            />
          </div> */}
           <div className="mb-4">
            <label
              htmlFor="username"
              className="block text-sm font-medium text-gray-700"
            >
              用户名
            </label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="mt-1 p-2 w-full border border-gray-300 rounded-md focus:ring focus:ring-blue-200"
            />
          </div> 
          <div className="mb-4">
            <label
              htmlFor="password"
              className="block text-sm font-medium text-gray-700"
            >
              密码
            </label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="mt-1 p-2 w-full border border-gray-300 rounded-md focus:ring focus:ring-blue-200"
            />
          </div> 
          {error && (
            <div className="text-red-500 text-sm mb-4">{error}</div>
          )}
          <button
            type="submit"
            className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:ring focus:ring-blue-200"
          >
            登录
          </button>
        </form>
      </div>
    </div>
  );
};

export default Login;